<template>
    <div class="lampListDetails">
        <div class="box80">
            <div class="sct">
                <!-- <div class="font12">位置：灯具品牌</div> -->
                <div class="cont">
                    <div class="lt">
                        <div class="wid100 font20">
                            <span @click="brandPage(detailInfo.brandId)">{{detailInfo.brandName}}</span>
                            <span @click="seriesPage(detailInfo.seriesId)">{{detailInfo.seriesName}}－{{detailInfo.modelName}} </span>
                             <span class="font14"><!--<img src="@/assets/images/icon5_03.png" alt="">0--></span>  
                        </div>
                        <div class="swiper">
                            <div class="swiper-container topss">
                                <div class="swiper-wrapper">
                                    <div class="swiper-slide" v-for="(item,index) in picList" :key="index">
                                        <span v-if="item.substr(item.lastIndexOf('.')) == '.jpg' || item.substr(item.lastIndexOf('.')) == '.jpeg' || item.substr(item.lastIndexOf('.')) == '.png'|| item.substr(item.lastIndexOf('.')) == '.gif'">
                                            <img @click="viewPicture(ImgPath+item)" :src="ImgPath + item">
                                        </span>
                                        <span v-else>
                                            <video controls poster="http://hgh-oss.oss-cn-beijing.aliyuncs.com//static/real/images/202004/wgt.jpg">
                                                <source :src="ImgPath + item" type="video/mp4">
                                                Your browser does not support the video tag.
                                            </video> 
                                        </span>
                                    </div>
                                    <div class="swiper-slide"> 
                                    </div>
                                </div>
                            </div>
                            <div class="botmss">
                                <div class="swiper-container botms">
                                    <div class="swiper-wrapper">
                                        <div class="swiper-slide" v-for="(item,index) in picList" :key="index" >
                                            <span v-if="item.substr(item.lastIndexOf('.')) == '.jpg' || item.substr(item.lastIndexOf('.')) == '.jpeg' || item.substr(item.lastIndexOf('.')) == '.png'|| item.substr(item.lastIndexOf('.')) == '.gif'">
                                                <img :src="ImgPath + item" width="50" height="50">
                                            </span>
                                            <span v-else>
                                                <div><img src="http://hgh-oss.oss-cn-beijing.aliyuncs.com//static/real/images/202004/wgt.jpg" alt=""></div>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <div class="swiper-button-next swiper-button-white" slot="button-next"></div>
                                <div class="swiper-button-prev swiper-button-white" slot="button-prev"></div>
                            </div>
                        </div>
                    </div>
                    <div class="ct">
                        <div class="font20">技术参数</div>
                        <ul>
                            <li>
                                <div class="name"><span>灯具类型：</span><span v-if="detailInfo.lumTypeName != null && detailInfo.lumTypeName != '0'" v-html="detailInfo.lumTypeName"></span><span v-else>-</span></div>
                                <div class="names"><span>灯具尺寸：</span>
                                <span v-show="detailInfo.lumLong == null && detailInfo.lumWidth == null && detailInfo.lumHeight == null">-</span>
                                <span v-show="detailInfo.lumLong != null">{{detailInfo.lumLong}}</span>
                                <span v-show="detailInfo.lumWidth != null"> * {{detailInfo.lumWidth}}</span>
                                <span v-show="detailInfo.lumHeight != null"> * {{detailInfo.lumHeight}}</span>
                                <span v-show="detailInfo.lumLong != null || detailInfo.lumWidth != null || detailInfo.lumHeight != null"> mm</span>
                                </div>
                            </li>
                            <li>
                                <div class="name"><span>光源种类：</span><span>{{detailInfo.lightType != null ? detailInfo.lightType : '-'}}</span></div>
                                <div class="names"><span>灯具材质：</span><span>{{detailInfo.lumMaterial != null ? detailInfo.lumMaterial : '-'}}</span></div>
                            </li>
                            <li>
                                <div class="name"><span>功率：</span><span>{{detailInfo.lumPower != null ? detailInfo.lumPower + (isNaN(detailInfo.lumPower) ? '' : 'W') : '-'}}</span></div>
                                <div class="names"><span>灯具颜色：</span><span>{{detailInfo.lumColor != null ? detailInfo.lumColor : '-'}}</span></div>
                            </li>
                            <li>
                                <div class="name"><span>电压：</span><span>{{detailInfo.voltage != null ? detailInfo.voltage + (isNaN(detailInfo.voltage) ? '' : 'V') : '-'}}</span></div>
                                <div class="names"><span>IP等级：</span><span>{{detailInfo.ipGrade != null ? detailInfo.ipGrade : '-'}}</span></div>
                            </li>
                            <li>
                                <div class="name"><span>色温：</span><span>{{detailInfo.colorTemp != null ? detailInfo.colorTemp + (isNaN(detailInfo.colorTemp) ? '' : 'K') : '-'}}</span></div>
                                <div class="names"><span>重量：</span><span>{{detailInfo.weight != null ? detailInfo.weight + (isNaN(detailInfo.weight) ? '' : 'KG') : '-'}}</span></div>
                            </li>
                            <li>
                                <div class="name"><span>光束角：</span><span>{{detailInfo.lightAngle != null ? detailInfo.lightAngle + (isNaN(detailInfo.lightAngle) ? '' : '°'): '-'}}</span></div>
                                <div class="names"><span>表面最高温度：</span> <span>{{(detailInfo.surfaceTemp != null && detailInfo.surfaceTemp != '') ? detailInfo.surfaceTemp + (isNaN(detailInfo.surfaceTemp) ? '' : '℃'): '-'}}</span></div>
                            </li>
                            <li>
                                <div class="name"><span>光通量：</span><span>{{detailInfo.guangTongLiang != null ? detailInfo.guangTongLiang + (isNaN(detailInfo.guangTongLiang) ? '' : 'lm') : '-'}}</span></div>
                                <div class="names"><span>质保年限：</span><span>{{detailInfo.zhibaoYears != null ? detailInfo.zhibaoYears + (isNaN(detailInfo.zhibaoYears) ? '' : '年'): '-'}}</span></div>
                            </li>
                            <li>
                                <div class="name"><span>控制方式：</span><span>{{detailInfo.controlTypeStr!= null ? detailInfo.controlTypeStr : '-'}}</span></div>
                                <div class="names"><span>参考价：</span><span>{{(detailInfo.referPrice!= null && detailInfo.referPrice != '') ? detailInfo.referPrice + (isNaN(detailInfo.referPrice) ? '' : '元'): '-'}} <!--/ {{detailInfo.referPriceUnit!= null ? detailInfo.referPriceUnit : '-'}}--></span></div>
                            </li>
                            <li>
                                <div class="name"><span>显色指数：</span><span v-html="detailInfo.ra!= null ? detailInfo.ra : '-'"></span></div>
                                <div class="names"><span>光源品牌：</span><span v-html="detailInfo.lightBrand!= null ? detailInfo.lightBrand : '-'"></span></div>
                            </li>
                        </ul>
                    </div>
                    <div class="rt">    
                        <div class="font20">下载</div>
                        <ul>
                            <li v-if="detailInfo.iesFile != null && detailInfo.iesFile != ''"><a :href="ImgPath + detailInfo.iesFile" target="_blank"><img src="@/assets/images/xz1_03.png" alt=""><p>IES</p></a></li>
                            <li v-if="detailInfo.guiGePdf != null && detailInfo.guiGePdf != ''"><a :href="ImgPath + detailInfo.guiGePdf" target="_blank"><img src="@/assets/images/xz2_07.png" alt=""><p>规格文件</p></a></li>
                            <li v-if="detailInfo.anZhuangDesc != null && detailInfo.anZhuangDesc != ''"><a :href="ImgPath + detailInfo.anZhuangDesc" target="_blank"><img src="@/assets/images/xz3_11.png" alt=""><p>安装说明</p></a></li>
                            <!-- <li><a :href="ImgPath + detailInfo.guiGePdf"><img src="@/assets/images/xz5_13.png" alt=""><p>尺寸文件</p></a></li> -->
                        </ul>
                    </div>
                </div>
            </div>
            <div class="sameSeries">
                <div class="font20" style="clear:both">同系列灯具</div>
                <ul style="width:50%">
                        <li >
                            <span class="trd">功      率：</span>
                            <div class="block" v-if="searchParam.lumPowerMin && searchParam.lumPowerMax">
                                <el-slider
                                range
                                v-model="lumPowerValue"
                                :min="searchParam.lumPowerMin"
                                :max="searchParam.lumPowerMax"
                                :marks="lumPowerRound"
                                :show-tooltip="showSliderTips(lumPowerValue)"
                                @change="changeTiao()"
                                >
                                </el-slider>
                            </div>
                            <div class="block" v-else><el-slider v-model="zero"  disabled :show-tooltip="false"></el-slider></div>
                        </li>
                    
                        <li >
                            <span class="trd">光  束  角：</span>
                            <div class="block" v-if="searchParam.lightAngleMin && searchParam.lightAngleMax">
                                <el-slider
                                v-model="lightAngleValue"
                                range
                                :min="searchParam.lightAngleMin"
                                :max="searchParam.lightAngleMax"
                                :marks="lightAngleRound"
                                :show-tooltip="showSliderTips(lightAngleValue)"
                                @change="changeTiao()">
                                </el-slider>
                            </div>
                            <div class="block" v-else><el-slider v-model="zero"  disabled :show-tooltip="false"></el-slider></div>
                    </li>
                        <li >
                        <span class="trd">光  通  量：</span>
                            <div class="block" v-if="searchParam.guangTongLiangMin && searchParam.guangTongLiangMax">
                                <el-slider
                                v-model="guangTongLiangValue"
                                range
                                :min="searchParam.guangTongLiangMin"
                                :max="searchParam.guangTongLiangMax"
                                :marks="guangTongLiangRound"
                                :show-tooltip="showSliderTips(guangTongLiangValue)"
                                @change="changeTiao()">
                                </el-slider>
                            </div>
                            <div class="block" v-else><el-slider v-model="zero"  disabled :show-tooltip="false"></el-slider></div>
                    </li>
                     
                    <li >
                        <span class="trd">Ra：</span>
                            <div class="block" v-if="searchParam.raMin && searchParam.raMax">
                                <el-slider
                                v-model="raValue"
                                range
                                :min="searchParam.raMin"
                                :max="searchParam.raMax"
                                :marks="raRound"
                                :show-tooltip="showSliderTips(raValue)"
                                @change="changeTiao()">
                                </el-slider>
                            </div>
                            <div class="block" v-else><el-slider v-model="zero" disabled :show-tooltip="false"></el-slider></div>
                    </li>
                </ul>
                <ul style="width:50%" class="ulss">
                    
                     <li>
                            <span class="trd">灯具类型：</span>
                            <el-checkbox-group v-model="lumTypeList"  size="medium">
                                <el-checkbox-button v-for="item in searchParam2.lumType" :label="item.lumType" :key="item.lumType">{{item.lumTypeName}}</el-checkbox-button>
                            </el-checkbox-group>
                        </li>
                     <li>
                         <span class="trd">色温色彩：</span>
                            <el-checkbox-group v-model="colorTempList"  size="medium">
                                <el-checkbox-button border v-for="item in searchParam2.colorTemp"  :label="item.colorTemp">{{item.colorTemp}}</el-checkbox-button>
                            </el-checkbox-group>
                    </li>
                     <li>
                        <span class="trd">控制方式：</span>
                            <el-checkbox-group v-model="controlTypeStrList"  size="medium">
                                <el-checkbox-button border v-for="item in searchParam2.controlType"  :label="item.controlTypeStr">{{item.controlTypeStr}}</el-checkbox-button>
                            </el-checkbox-group>
                    </li>
                </ul>
                <div  style="clear:both"></div>
            </div>
            <div class="screenTables">
                <productLampTable ref="table" v-on:tableOver="tableOver"></productLampTable>
            </div>
        </div>
    <!--查看图片 -->
    <el-dialog :visible.sync="showPic" v-dialogDrag custom-class="imgsAMG dee">
      <span>
        <img :src="showPicUrl" />
      </span>
    </el-dialog>
    
    </div>
</template>
<script>
import productLampTable from '@/views/component/productLampTable.vue'
import $ from 'jquery'
import Swiper from 'swiper';
import 'swiper/dist/css/swiper.min.css';
export default{
    data(){
        return{
            zero:0,
            showPic: false, //查看图片
            showPicUrl: "", //图片地址
            lumTypeList:[],
            colorTempList:[],
            controlTypeStrList:[],
            chooseSeriesIdList:[],
            request:{
                isPublic:1,
                brandIds:'', //灯具品牌 多选
                lumTypes:'', //灯具类型 多选
                lumPowerMin:'',
                lumPowerMax:'', //功率
                colorTempLike:'', //色温色彩
                colorTempMin:'', 
                colorTempMax:'', //区间值
                guangTongLiangMin:'',
                guangTongLiangMax:'',  //光通量
                lightAngleMin:'',
                lightAngleMax:'',//光束角
                controlTypeStrLike:'', //控制方式
                effectDescLike:'', //效果描述
                page:1,
                rows:20
            },
            detailInfo:{},
            picList:[],
            param:'1' ,
            cds:'',
            tableStatus:1,
            searchParam:{},
            searchParam2:{},
            lumPowerValue: [],
            lumPowerRound: {},
            lightAngleValue: [],
            lightAngleRound: {},
            guangTongLiangValue: [],
            guangTongLiangRound: {},
            raValue: [],
            raRound: {},
        }
    },
    watch:{
        lumTypeList:function(val,old){
            this.request.lumTypes = val.join(',')
            this.loadPowerDeng()
            this.search(1)
        },
        colorTempList:function(val,old){
            this.request.colorTemps = val.join(',')
            this.loadPowerDeng()
            this.search(1)
        },
        controlTypeStrList:function(val,old){
            this.request.controlTypeStrs = val.join(',')
            this.loadPowerDeng()
            this.search(1)
        },
    },
    components:{
        productLampTable
    },
    methods:{
        changeTiao(){
            this.search(1)
            this.loadKZFSdeng()
        },
        viewPicture(url) {
            this.showPic = true;
            this.showPicUrl = url;
        },
        showSliderTips(val){
            if(isNaN(val[0])){
                return false
            }
            return true
        },
        tableOver(){
            
            this.$nextTick(function () {
                this.scrollimg();
            })
            setTimeout(this.scrollimg,1000);
            this.search(1)
        },
        search(page){
            this.request.page = page
            this.request.seriesId=this.detailInfo.seriesId
            this.request.brandId = this.detailInfo.brandId
            this.request.lumPowerMin  = this.lumPowerValue[0]
            this.request.lumPowerMax  = this.lumPowerValue[1]
            this.request.lightAngleMin   = this.lightAngleValue[0]
            this.request.lightAngleMax  = this.lightAngleValue[1]
            this.request.guangTongLiangMin    = this.guangTongLiangValue[0]
            this.request.guangTongLiangMax  = this.guangTongLiangValue[1]
            this.request.raMin  = this.raValue[0]
            this.request.raMax  = this.raValue[1]
            this.$refs.table.search(this.request)
        },
        initData(id){
            //编辑
            let self = this
            var temp = []
            this.$http.get('/api/banner/stlamps/'+id,{},function(res){
                if(res.success){
                    self.detailInfo = res.data
                    if(self.detailInfo.waiGuanPic != null && self.detailInfo.waiGuanPic != ''){
                        temp.push(self.detailInfo.waiGuanPic)
                    }
                    if(self.detailInfo.chiCunPic != null && self.detailInfo.chiCunPic != ''){
                        temp.push(self.detailInfo.chiCunPic)
                    }
                    if(self.detailInfo.peiGuangPic != null && self.detailInfo.peiGuangPic != ''){
                        temp.push(self.detailInfo.peiGuangPic)
                    }
                    if(self.detailInfo.anLiPic != null && self.detailInfo.anLiPic != ''){
                        temp.push(self.detailInfo.anLiPic)
                    }
                    if(self.detailInfo.fuJianPic != null && self.detailInfo.fuJianPic != ''){
                        temp.push(self.detailInfo.fuJianPic)
                    }
                    if(self.detailInfo.fuJianInstallPic != null && self.detailInfo.fuJianInstallPic != ''){
                        temp.push(self.detailInfo.fuJianInstallPic)
                    }
                    self.picList = temp
                    self.getParam()
                }
            })

        },
        
        getParam(){
             let self = this
            //获取最大值最小值
            this.$http.get("/api/banner/stlamps/getMaxMinBySupplierStlamp", {brandId:this.detailInfo.brandId,seriesId:this.detailInfo.seriesId,lumTypes:this.request.lumTypes,colorTemps:this.request.colorTemps,controlTypeStrs:this.request.controlTypeStrs}, function(res) {
                if (res.success) {
                    self.searchParam = res.data
                    let powerMin = res.data.lumPowerMin
                    let powerMax = res.data.lumPowerMax
                    if(powerMin != undefined && powerMax != undefined){
                        if(self.lumPowerValue.length == 0){
                            self.lumPowerValue = [powerMin,powerMax]
                        }
                        self.lumPowerRound = {}
                        self.lumPowerRound[powerMin] = powerMin + "W"
                        self.lumPowerRound[powerMax] = powerMax + "W"
                    }
                    let lightAngleMin = res.data.lightAngleMin
                    let lightAngleMax = res.data.lightAngleMax
                    if(lightAngleMin != undefined & lightAngleMax != undefined){
                        if(self.lightAngleValue.length == 0){
                            self.lightAngleValue = [lightAngleMin,lightAngleMax]
                        }
                        self.lightAngleRound = {}
                        self.lightAngleRound[lightAngleMin] = lightAngleMin  +'°'
                        self.lightAngleRound[lightAngleMax] = lightAngleMax  +'°'
                    }
                    let guangTongLiangMin = res.data.guangTongLiangMin
                    let guangTongLiangMax = res.data.guangTongLiangMax
                    if(guangTongLiangMin != undefined & guangTongLiangMax != undefined){
                        if(self.guangTongLiangValue.length == 0){
                            self.guangTongLiangValue = [guangTongLiangMin,guangTongLiangMax]
                        }
                        self.guangTongLiangRound = {}
                        self.guangTongLiangRound[guangTongLiangMin] = guangTongLiangMin + "lm",
                        self.guangTongLiangRound[guangTongLiangMax] = guangTongLiangMax +'lm'
                    }
                    let raMin = res.data.raMin
                    let raMax = res.data.raMax
                    if(raMin != undefined & raMax != undefined){
                        if(self.raValue.length == 0){
                            self.raValue = [raMin,raMax]
                        }
                        self.raRound = {}
                        self.raRound[raMin] = raMin ,
                        self.raRound[raMax] = raMax
                    }
                    
                    var data ={
                        brandId:self.detailInfo.brandId,
                        seriesId:self.detailInfo.seriesId,
                        lumPowerMin:powerMin,
                        lumPowerMax:powerMax,
                        lightAngleMin:lightAngleMin,
                        lightAngleMax:lightAngleMax,
                        guangTongLiangMin:guangTongLiangMin,
                        guangTongLiangMax:guangTongLiangMax,
                        raMin:raMin,
                        raMax:raMax,
                    }
                    //获取筛选参数
                    self.$http.get("/api/banner/stlamps/listLumType", data, function(res) {
                        if (res.success) {
                            console.log(res)
                            self.searchParam2 = res.data
                        }
                    });
                }
                
            });
        },
        loadKZFSdeng(){
            let self = this
            var data ={
                brandId:this.detailInfo.brandId,
                seriesId:this.detailInfo.seriesId,
                lumPowerMin:this.request.lumPowerMin,
                lumPowerMax:this.request.lumPowerMax,
                lightAngleMin:this.request.lightAngleMin,
                lightAngleMax:this.request.lightAngleMax,
                guangTongLiangMin:this.request.guangTongLiangMin,
                guangTongLiangMax:this.request.guangTongLiangMax,
                raMin:this.request.raMin,
                raMax:this.request.raMax,
            }
            //获取筛选参数
            this.$http.get("/api/banner/stlamps/listLumType", data, function(res) {
                if (res.success) {
                    console.log(res)
                    self.searchParam2 = res.data
                }
            });
        },
        loadPowerDeng(){
            let self = this
            //获取最大值最小值
            this.$http.get("/api/banner/stlamps/getMaxMinBySupplierStlamp", {brandId:this.detailInfo.brandId,seriesId:this.detailInfo.seriesId,lumTypes:this.request.lumTypes,colorTemps:this.request.colorTemps,controlTypeStrs:this.request.controlTypeStrs}, function(res) {
                if (res.success) {
                    self.searchParam = res.data
                    let powerMin = res.data.lumPowerMin
                    let powerMax = res.data.lumPowerMax
                    if(powerMin != undefined && powerMax != undefined){
                        if(self.lumPowerValue.length == 0){
                            self.lumPowerValue = [powerMin,powerMax]
                        }
                        self.lumPowerRound = {}
                        self.lumPowerRound[powerMin] = powerMin + "W"
                        self.lumPowerRound[powerMax] = powerMax + "W"
                    }
                    let lightAngleMin = res.data.lightAngleMin
                    let lightAngleMax = res.data.lightAngleMax
                    if(lightAngleMin != undefined & lightAngleMax != undefined){
                        if(self.lightAngleValue.length == 0){
                            self.lightAngleValue = [lightAngleMin,lightAngleMax]
                        }
                        self.lightAngleRound = {}
                        self.lightAngleRound[lightAngleMin] = lightAngleMin  +'°'
                        self.lightAngleRound[lightAngleMax] = lightAngleMax  +'°'
                    }
                    let guangTongLiangMin = res.data.guangTongLiangMin
                    let guangTongLiangMax = res.data.guangTongLiangMax
                    if(guangTongLiangMin != undefined & guangTongLiangMax != undefined){
                        if(self.guangTongLiangValue.length == 0){
                            self.guangTongLiangValue = [guangTongLiangMin,guangTongLiangMax]
                        }
                        self.guangTongLiangRound = {}
                        self.guangTongLiangRound[guangTongLiangMin] = guangTongLiangMin + "lm",
                        self.guangTongLiangRound[guangTongLiangMax] = guangTongLiangMax +'lm'
                    }
                    let raMin = res.data.raMin
                    let raMax = res.data.raMax
                    if(raMin != undefined & raMax != undefined){
                        if(self.raValue.length == 0){
                            self.raValue = [raMin,raMax]
                        }
                        self.raRound = {}
                        self.raRound[raMin] = raMin ,
                        self.raRound[raMax] = raMax
                    }
                }
            });
        },
        brandPage(id){
            let routeUrl = this.$router.resolve({
                path: "/brandPage?id="+id
            });
            window.open(routeUrl.href, '_blank');
        },
        seriesPage(id){
            let routeUrl = this.$router.resolve({
                path: "/seriesPage?id="+id
            });
            window.open(routeUrl.href, '_blank');
        },
        scrollimg(){
            var botms = new Swiper('.botms', {
                spaceBetween: 10,
                slidesPerView: 4,
                freeMode: true,
                watchSlidesVisibility: true,
                watchSlidesProgress: true,
            })
            var topss = new Swiper('.topss', {
                spaceBetween: 10,
                navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
                },
                thumbs: {
                    swiper: botms
                }
            })
        }
    },
    created(){
        var id = this.$route.query.id
            if(id != null && id != ''){
                this.initData(id)
            }
    },
     mounted(){
     }
}
</script>  
<style rel="stylesheet/scss" lang="scss">
.topss video{
    width: 100%;
}
    .lampListDetails{
        margin-top: 88px;
        .sct{
            overflow: hidden;
            background-color: #ffffff;
	        box-shadow: -7px 6px 10px 0px rgba(90, 99, 163, 0.06);
            border-radius: 5px;
            margin-bottom: 25px;
             padding: 20px;
             .font12{
                 color: #333333;
                 font-size: 12px;
                 margin-bottom: 14px;
             }
            .cont{
                display: flex;
                display: -webkit-flex;
                .font20{
                    margin-bottom: 15px;
                }
                .lt{
                    width: 450px;
                    margin-right: 15px;
                    padding: 20px;
                    background-color: #f6f7fb;
                    .swiper{
                        .botmss{
                            padding: 0 26px;
                            position: relative;
                            margin-top: 15px;
                            .swiper-slide-thumb-active{
                                border: 1px solid #5962a3;
                            }
                            .swiper-button-white{
                                background-color: #c9c9c9;
                                border-radius: 1px;
                                height: 100%;
                                top: 0;
                                margin-top: 0;
                                opacity: 1;
                                background-size: 10px;
                                width: 22px;
                                &.swiper-button-next{
                                    right: 0;
                                }
                                &.swiper-button-prev{
                                    left: 0;
                                }
                            }
                        }
                    }
                    .font20{
                        span:first-child{
                           color: #5962a3;
                           margin-right: 10px;
                        }
                        span:last-child{
                            float: right;
                            color: #333333;
                            img{
                                display: inline-block;
                                margin-right: 5px;
                            }
                        }
                    }
                }
                .ct{
                    padding: 20px;
                    margin-right: 15px;
                    width: calc(100% - 562px);
                    background-color: #f6f7fb;
                    li{
                        overflow: hidden;
                        padding: 14px 0;
                        border-bottom: solid 1px rgba(102, 102, 102, 0.1);
                        color: #666666;
                        font-size: 14px;
                        &:last-child{
                            border-bottom: none;
                        }
                        .name{
                            width: 50%;
                            float: left;
                        }
                        .names{
                            width: 50%;
                            float: left;
                        }
                    }
                }
                .rt{
                    width: 85px;
                    text-align: center;
                    background-color: #5962a3;
                    padding: 20px 0;
                    .font20{
                        color: #ffffff;
                    }
                    li{
                        padding: 10px;
                        border-bottom: solid 1px rgba(234, 239, 242, 0.2);
                        cursor: pointer;
                        img{
                            height: 22px;
                        }
                        p{
                            color: #ffffff;
                            margin-top: 5px;
                        }
                    }
                }
            }
        }
        .sameSeries{
            padding: 20px;
            background-color: #ffffff;
	        box-shadow: -7px 6px 10px 0px rgba(90, 99, 163, 0.06);
            border-radius: 5px;
            margin-bottom: 30px;
            .font20{
                text-align: center;
                margin-bottom: 15px;
                color: #5a63a3;
                font-weight: bold;
            }
            ul{
                float:left;
                overflow: hidden;
                li{
                     width: 100%;
                    padding: 12px 8px;
                    color: #888888;
                    float: left;
                    // height: 62px;
                    //border-bottom: 1px solid #ccc;
                    border-right: 2px solid #ccc;
                    // &:nth-child(2n){
                    //     border-right: none
                    // }
                     .el-radio__input{
                        display: none;
                    }
                    label{
                        width: auto;
                        text-align: center; 
                        margin-right: 10px;
                        margin-bottom: 5px;
                        border: 1px solid #DCDFE6;
                        border-radius: 4px !important;
                            overflow: hidden;
                        .el-checkbox-button__inner{
                            border: none;
                        }
                         &.el-checkbox-button.is-checked .el-checkbox-button__inner{
                            color: #fff;
                            background-color: #5a63a3;   
                        }
                        &.el-radio{
                            height: 30px;
                            line-height: 30px;
                             padding: 0;
                             margin-bottom: 5px;
                             .el-radio__label{
                                 padding: 0;
                             }
                        }
                        &:first-child .el-checkbox-button__inner{
                            border-left: none;
                        }
                        &.is-bordered.is-checked{
                            border-radius: 5px;
                            border: solid 1px #e8e8e8;
                            color: #fff;
                            background-color: #5a63a3;                            
                            .el-radio__label{
                                color: #ffffff;
                            }
                        }
                    }
                    .trd{
                        width: 70px;
                        text-align: right;
                        line-height: 36px;
                        float: left;
                    }
                    .block{
                        width: calc(100% - 105px);
                        float: left;
                        padding: 0 45px 0 60px;
                        .el-slider__bar{
                            background-color: #5a63a3;
                        }
                        .el-slider__button{
                            border-color: #5962a3
                        }
                        .el-slider__marks-text{
                            margin-top:-8px;
                             -webkit-transform: translateX(-51px);
                            transform: translateX(-51px); 
                            width: 40px;
                            text-align: right;
                            &:nth-child(2){
                                transform: translateX(11px);
                                -webkit-transform: translateX(11px);
                                text-align: left;
                            }
                        }
                    }
                    &:last-child{
                       
                           border-bottom: none;
                    }
                    &:first-child{
                        border-left: none;
                    }
                }
            }
            table{
                width: 100%;
                td{
                    width: 50%;
                    padding: 12px 0;
                    color: #888888;
                    .el-radio__input{
                        display: none;
                    }
                    label{
                        width: 102px;
                        text-align: center; 
                        margin-right: 10px;
                        &.el-radio{
                            height: 30px;
                            line-height: 30px;
                             padding: 0;
                             .el-radio__label{
                                 padding: 0;
                             }
                        }
                        &.is-bordered.is-checked{
                            border-radius: 5px;
                            border: solid 1px #e8e8e8;
                            color: #fff;
                            background-color: #5a63a3;                            
                            .el-radio__label{
                                color: #ffffff;
                            }
                        }
                    }
                    .trd{
                        width: 70px;
                        text-align: right;
                        line-height: 36px;
                        float: left;
                    }
                    .block{
                        width: calc(100% - 90px);
                        float: left;
                        padding: 0 40px 0 50px;
                        .el-slider__bar{
                            background-color: #5a63a3;
                        }
                        .el-slider__button{
                            border-color: #5962a3
                        }
                        .el-slider__marks-text{
                            margin-top:-8px;
                            -webkit-transform: translateX(-100%);
                            transform: translateX(-100%); 
                            &:last-child{
                                transform: translateX(0%);
                                -webkit-transform: translateX(0%);
                            }
                        }
                    }
                    &:last-child{
                        padding-left: 20px;
                        border-right: none;
                    }
                    &:first-child{
                        border-left: none;
                    }
                }
            }
            ul.ulss{
                li{
                    border-right: none;
                }
            }
        }
    }
    .screenTable{
        margin-top: 25px;
     li {
        width: calc(20% - 16px);
        margin-left: 20px;
        float: left;
        margin-bottom: 20px;
        background-color: #f7f7f7;
        border-radius: 4px;
        text-align: center;
        cursor: pointer;
        img{
            width: auto;
            height: auto;
        }
        &:nth-child(5n + 1){
            margin-left: 0;
        }
        .des {
            border-radius: 4px 4px 0px 0px;
            background-repeat: no-repeat;
            background-size: cover;
            height: 160px;
            cursor: pointer;
        }
        .cont {
            padding: 12px;
        }
        .font16 {
            color: #5a63a3;
        }
        .font14 {
            color: #666666;
            overflow: hidden;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            text-overflow: ellipsis;
            word-break: break-all;
            line-height: 20px;
            height: 20px;
        }
    }
}
.screenTable2{
    margin-top: 22px;
    th{
        background-color: #f6f7fb;
        color: #555555;
            text-align: center;
    }
    .el-table{
        td{
            text-align: center;
            &:last-child{
                .btns_S{
                    display: none;
                    .btn2{
                        font-size: 12px;
                        line-height: 1.5em;                       
                        border-radius: 4px;                       
                        margin: 2px;
                        display: inline-block;
                        color: #fff;
                    }
                }
                &:hover{
                    background-color: #5a63a3;
                    .btns_S{
                        display: block;
                    }
                    .btns_S2{
                        display: none;
                    }
                }
            }
            .nclo{
                    color: #5962a3;
                    font-weight: bold;
                    cursor: pointer;
            }
        }
    }
}
.screenTables{
    background-color: #ffffff;
	box-shadow: -7px 6px 10px 0px 
		rgba(90, 99, 163, 0.06);
    border-radius: 5px;
    padding: 20px;
    margin-bottom: 40px;
    .rt{
         text-align: right;
        margin-bottom: 15px;
        span{
            img{
                display: inline-block;
            }
            &.list_S{
                button {
                    position: relative;
                    top: 4px;
                    padding: 0 0 5px;
                    border: none;
                        span {
                        position: relative;
                        top: -5px;
                        display: inline-block;
                        color: #999;
                        img {
                            position: relative;
                            top: 5px;
                            margin-right:5px;
                        }
                    }
                }
            }
            &.xuan{
                margin-right: 12px;
                display: inline-block;
                position: relative;
                top:5px;
                height: 20px;
            }
        }
    }
}
</style>